@extends('layout.default')

@section('layout.content')

   <div class="row">    
    <div class="col-xs-8 col-md-6">
      <form method="get" class="form-horizontal">        
        <div class="col-xs-12">
          <div class="form-group">
            <div class="input-group">
              <input type="text" value="{{$query}}" class="form-control input-lgr" id="query" name="query"
                     placeholder="书名/ISBN"
                     autocomplete="off"/>
              <span class="input-group-btn">
              <button class="btn btn-lg btn-primary" id="btn-sign" type="submit">
              <i class="ace-icon fa fa-search"></i>
              查询
              </button>
            </span>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="col-xs-4 col-md-6 align-right">
        <a href="{{route('book.create')}}" class="btn btn-lg btn-danger"><i class="ace-icon fa fa-user-plus"></i>书籍录入</a>
    </div>
  </div><!-- /.row -->


  <div class="row">
    <div class="col-xs-12">

      <div class="book-list">
      <ul class="ul-list">
        @foreach ($books as $book)
        <li class="li-list">
          <a href="{{route('book.edit',array('id'=>$book->id) )}}">
            <img class="lazy pull-left img-error1" src="/assets/images/blank.gif" data-original="/assets/images/books/{{$book->dbid}}.jpg" />
          </a>
          <div class="li-title"><span class="smaller-80">{!! $book->present()->bookStore !!}</span> <a href="{{route('book.borrows',array('id'=>$book->id) )}}">{{ $book->title }}</a></div>
          <div class="li-author smaller-80">{{ $book->author }}</div>
          <div class="li-author smaller-80">{{ $book->publisher }}</div>
          <div class="li-summary smaller-80 grey">{{ $book->summary }}</div>
        </li>
        @endforeach
      </ul>
      </div>

    </div>
  </div>


  <div class="row">
    <div class="col-xs-12">
      <div class="dataTables_paginate paging_bootstrap">
        {{$books->appends(['query'=>$query])->links()}}
      </div>
    </div>
  </div>
@stop

@section('javascript')
  <script src="//cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
  <script type="text/javascript">

      $(function () {
          $('#query').focus();

           $(".lazy").lazyload({
              effect : "fadeIn"
            });
  

      });
  </script>
@stop